<template>
  <el-table
    :data="showList"
    height="500"
  >

    <el-table-column
      label="备注"
      prop="Introduction"
      width="150"
      fixed
    />

    <el-table-column
      label="账号"
      prop="Username"
      width="100"
    />

    <el-table-column
      label="id"
      prop="ID"
      width="50"
    />

    <el-table-column
      label="密码"
      prop="Password"
      width="150"
    />

    <el-table-column
      label="权限"
      width="200"
    >
      <template slot-scope="scope">
        <div
          v-for="item in scope.row.Roles.split(' ')"
          :key="item"
          class="tag-item"
        >
          <el-popover trigger="hover" placement="top">
            <p>{{ showTitle(item) }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag>{{ item }}</el-tag>
            </div>
          </el-popover>
        </div>
      </template>
    </el-table-column>

    <el-table-column
      align="right"
      min-width="450"
    >
      <template slot="header" slot-scope="scope">
        <div>
          <el-button type="primary" style="width: 100px" @click="addAdmin">
            添加管理员
          </el-button>
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            placeholder="输入关键字搜索"
            style="width: 300px;"
          >
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-circle-close"
              @click="search = ''"
            />
          </el-input>
        </div>
        <!-- 由于使用了ESlint，没有使用scope 导致报错，下面的div只为了不让这个错误报错 -->
        <div v-if="false">{{ scope }}</div>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
        >分配权限</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >删除管理员</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { userRoles } from '@/router/index'
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      search: '',
      userRoles
    }
  },
  computed: {
    // 过滤器
    showList() {
      return this.list.filter(data => {
        // !this.search || data.Introduction.toLowerCase().includes(this.search.toLowerCase())
        if (this.search === '') return true
        if (data.Username.toLowerCase().includes(this.search.toLowerCase())) return true
        if (data.Introduction.toLowerCase().includes(this.search.toLowerCase())) return true
        if (data.Roles.toLowerCase().includes(this.search.toLowerCase())) return true
        return false
      })
    }
  },
  methods: {
    handleEdit(_index, row) {
      // console.log(index, row)
      this.$emit('assignPermissions', row)
    },
    handleDelete(_index, row) {
      // console.log(index, row)
      this.$emit('deleteAdmin', row)
    },
    addAdmin() {
      // console.log('添加管理员')
      this.$emit('addAdmin')
    },
    showTitle(item) {
      for (const i of this.userRoles) if (i.id === item) return i.title
      return ''
    }
  }
}
</script>

<style scoped>
.tag-item{
  display: inline-block;
  margin: 10px 5px;
}
</style>
